<style>
    .order-header-first {
        font-size: small;color: grey;
    }
    .order-header {
        font-size: small;color: grey;padding-left: 5%
    }
    .order-header-text {
        padding-left: 5px;
        color: #444;
    }
    .order-lable-div{
        width: 10%;
        float: left;;
    }
</style>

@foreach($paginator as $row)
    <div id="order_{{ $row->order_no }}" class="box box-primary">
        <div class="box-header with-border" style="background-color: #f1f9fd">
            <div class="order-lable-div" style="width: 15%;">
                <span class="order-header-first">订单号: </span><span class="order-header-text">{{ $row->order_no ?? '' }}</span></div>
            <div class="order-lable-div">
                <span class="order-header">收货国家: </span><span class="order-header-text">{{ $row->receiver->country ?? '' }}</span></div>
            <div class="order-lable-div">
                <span class="order-header">订单渠道: </span><span class="order-header-text">{{ App\Models\CustomerDelivery\CustomerOrder::$_shipOrderChannel[$row->order_channel] ?? '' }}</span></div>
            <div class="order-lable-div">
                <span class="order-header">订单类型: </span><span class="order-header-text">{{ App\Models\CustomerDelivery\CustomerOrder::$_shipOrderType[$row->order_type] ?? '' }}</span></div>
            <div class="order-lable-div">
                <span class="order-header">订单平台: </span><span class="order-header-text">{{\App\Models\Basics\SysPlat::getSysPlatTitle($row->plat_id) }}</span></div>
            <div class="order-lable-div" style="width: 12%;">
                <span class="order-header">下单时间: </span><span class="order-header-text">{{ $row->order_at ?? '' }}</span></div>
            <div class="order-header-div">
                <span class="order-header">客户备注: </span><span class="order-header-text">{{ $row->order_remarks ?? '' }}</span>
            </div>
            <div class="box-tools pull-right">
                <button class="btn btn-box-tool list-modal" title="查看收货信息" data-id="{{ $row->id }}" data-action="viewDetail">查看收货人信息</button>
            </div>
        </div>

        <div class="box-body table-responsive no-padding">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th width="10%">SKU</th>
                        <th width="20%">品类</th>
                        <th width="20%">产品名称</th>
                        <th width="10%">下单数量</th>
                        <th width="10%">申发数量</th>
                        <th width="10%">申请状态</th>
                    </tr>
                </thead>

                <tbody>

                    @foreach($row->detail as $item)

                    <?php
                        //发货,最大可申发数量
                        $maxNum = $item->order_num - $item->apply_num ?? 0;
                    ?>

                    <tr>
                        <!--start 根据sku展开发货方式模板-->
                        <td>
                            @if($item->delivery_detail->isNotEmpty())
                            <span class="grid-expand-grid-row" style="float: left; width: 80%;"
                                  data-inserted="0"
                                  data-name="{{ 'sku-psku_code-'.$item->psku_id . $row->order_no }}"
                                  data-toggle="collapse"
                                  data-target="#grid-collapse-{{ 'sku-psku_code-'.$item->psku_id . $row->order_no }}"
                                  aria-expanded="true"
                            >
                                <a href="javascript:void(0)" title="点我,展开发货方式">
                                    <i class="fa fa-angle-double-down"></i>&nbsp;&nbsp;{{ $item->sku->psku_code ?? '' }}
                                </a>
                            </span>
                            @else
                               <span class="grid-expand-grid-row" style="float: left; width: 80%; padding-left: 14px;">
                                    {{ $item->sku->psku_code ?? '' }}
                               </span>
                            @endif

                            <template class="grid-expand-{{ 'sku-psku_code-'.$item->psku_id . $row->order_no }}">
                                <tr style="background-color: #ecf0f5;">
                                    <td colspan='100%' style='padding:0 !important; border:0;'>
                                        <div id="grid-collapse-{{ 'sku-psku_code-'.$item->psku_id . $row->order_no }}" class="collapse">
                                            <div style="padding: 10px 10px 0 10px;" class="html">

                                                <!-- FBA仓 -->
                                                @if($item->delivery_detail->isNotEmpty())
                                                    <table class="table">
                                                        <thead>
                                                        <tr>
                                                            <th>发货方式</th>
                                                            <th>申请单号</th>
                                                            <th>实际发货订单号</th>
                                                            <th>发货状态</th>
                                                            <th>发货时间</th>
                                                            <th>申请数量</th>
                                                            <th>实发数量</th>
                                                            <th>物流追踪号</th>
                                                            <th>运输方式</th>
                                                            <th>发货账号</th>
                                                            <th>海外仓仓库</th>
                                                            <th>国家</th>
                                                            <th>站点</th>
                                                            <th>申请备注</th>
                                                            <th>发货备注</th>
                                                            <th>销售人员</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>

                                                        @foreach($item->delivery_detail as $val)
                                                            <tr>
                                                                <td> {{ \App\Models\CustomerDelivery\CustomerDelivery::$_deliveryType[$val->delivery->delivery_type ?? ''] ?? '' }} </td>
                                                                <td> {{ $val->delivery_no ?? '' }} </td>
                                                                <td> {{ $val->delivery_order_no ?? '' }} </td>
                                                                <td> {{ \App\Models\CustomerDelivery\CustomerDeliveryDetail::$_status[$val->status] ?? '' }} </td>
                                                                <td> {{ $val->delivery->delivered_at ?? '' }} </td>
                                                                <td> {{ $val->apply_num ?? 0 }} </td>
                                                                <td> {{ $val->ship_num ?? 0 }} </td>
                                                                <td> {{ $val->tracking_no ?? '' }} </td>
                                                                <td> {{ $val->logistics_type ?? '' }} </td>
                                                                <td> {{ \App\Models\Basics\SysPlatAccount::getAccountById($val->account_id) ?? '' }} </td>
                                                                <td> {{ $val->warehouse->w_code ?? '' }} </td>
                                                                <td> {{ \App\Models\Basics\SysCountry::getCountryById($val->delivery->country_id ?? '') ?? '' }} </td>
                                                                <td> {{ \App\Models\Basics\SysArea::getSysAreaById($val->delivery->area_id ?? '') ?? '' }} </td>
                                                                <td> {{ $val->apply_remarks ?? '' }} </td>
                                                                <td> {{ $val->delivery_remarks ?? '' }} </td>
                                                                <td> {{ \App\Util\User::getUsernameById($val->delivery->seller_id ?? '') ?? '' }} </td>
                                                            </tr>
                                                        @endforeach
                                                        </tbody>
                                                    </table>
                                                @endif
                                            </div>
                                        </div>
                                    </td>
                                </tr>

                            </template>

                        </td>
                        <!--end 列展开结束-->

                        <td>{{ $item->sku->classify->title ?? '' }}</td>
                        <td>{{ $item->sku->psku_cn ?? '' }}</td>
                        <td>{{ $item->order_num ?? 0 }}</td>
                        <td>{{ $item->apply_num ?? 0 }}</td>
                        <td>{{ \App\Models\CustomerDelivery\CustomerOrderDetails::$_status[$item->status] ?? '' }}</td>
                    </tr>

                    @endforeach

                </tbody>
            </table>
        </div>
    </div>
@endforeach

<div class="modal fade" id="listDetailModal">
    <div class="modal-dialog" style="width: 50%;">
        <div class="modal-content">
            <!-- 内容会加载到这里 -->
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="listModal" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" style="width: 60%;">
        <div class="modal-content">
            <!-- 内容会加载到这里 -->
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script language="JavaScript" type="text/javascript">
    $(function () {

        //列展开 (默认添加模板数据)
        $('.grid-expand-grid-row').each(function() {
            let name = $(this).data('name');
            let row = $(this).closest('tr');
            row.after($('template.grid-expand-'+name).html());
        });

        //列展开
        $('.grid-expand-grid-row').on('click', function () {
            if ($(this).data('inserted') == '0') {
                $(this).data('inserted', 1);
            }
            $("i", this).toggleClass("fa-angle-double-down fa-angle-double-up");
        });

        //查看
        $('.list-modal').on('click', function(e) {
            e.preventDefault();
            let id = $(this).data('id');
            let action = $(this).data('action');
            $("#listModal").modal({
                remote : '/xqc/customer-delivery/customer-order-modal?param=' + id + '&action=' + action,
            });
        });
        $("#listModal").on("hidden.bs.modal", function() {
            $(this).removeData("bs.modal");
            $(this).find(".modal-content").children().remove();
        });

    });
</script>
